<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>xCloud Player</title>
    <script src="./dist/xCloudPlayer.min.js"></script>
    <script src="./stream.js"></script>
  </head>
  <body>
    
    <div id="consolesList" style="line-height: 200%;">
      Loading consoles...
    </div>
    
    <hr />
    
    Xbox XCloud POC - <strong>Status:</strong> <span id="streamStatus">Not connected</span>
    <strong>Video FPS:</strong> <span id="fpsCounter_video">0</span>
    <strong>Audio FPS:</strong> <span id="fpsCounter_audio">0</span>
    <strong>Metadata FPS:</strong> <span id="fpsCounter_metadata">0</span>
    <strong>Input FPS:</strong> <span id="fpsCounter_input">0</span>
    <br />
    <br />
    
    <div class="container" style="display: flex;">
        <div id="videoHolder" style="border: 1px solid #000000; height: 450px; width: 800px;"></div>
    
        <div id="uiButtons" style="padding-left: 20px;">
            <strong>Controls</strong> <br />
    
            <!-- Current bitrate: <span id="currentBitrate">N/A</span> (min: 512, max: 12000) <br />
            <button onclick="client.setBitrate(client.getChannelProcessor('control').getBitrate()+1000)">+ 1000</button> <button onclick="client.setBitrate(client.getChannelProcessor('control').getBitrate()-1000)">- 1000</button> <br />
            <button onclick="client.setBitrate(512)">512</button> <button onclick="client.setBitrate(2700)">2700</button> <button onclick="client.setBitrate(5000)">5000</button> <button onclick="client.setBitrate(8000)">8000</button>  <button onclick="client.setBitrate(12000)">12000</button> <br />
            <br /> -->
    
            <button onclick="client.reset()">Reset stream</button> <button onclick="client.getChannelProcessor('video').resetBuffer()">Reset Videobuffer</button>
            <br /><br />
    
            <strong>Dialog</strong>
    
            <div style="border: 1px solid #000; padding: 10px;">
                <span id="dialogTitle">No active dialog</span><br />
                <span id="dialogText"></span><br />
    
                <button id="dialogButton1"></button>
                <button id="dialogButton2"></button>
                <button id="dialogButton3"></button>
                
            </div>
    
            <br />
            
            <strong>Controls</strong>
    
            <div style="border: 1px solid #000; padding: 10px;">
                
                <div style="display: flex;">
                
                    <div class="dpad" style="text-align: center; padding: 10px;">
                        <button onclick="client.getChannelProcessor('input').pressButton(0, { DPadUp: 1 })">Up</button> <br />
                        <button onclick="client.getChannelProcessor('input').pressButton(0, { DPadLeft: 1 })">Left</button> <button onclick="client.getChannelProcessor('input').pressButton(0, { DPadRight: 1 })">Right</button> <br />
                        <button onclick="client.getChannelProcessor('input').pressButton(0, { DPadDown: 1 })">Down</button> <br />
                    </div>
    
                    <div class="misc" style="text-align: center; padding: 10px;">
                        <button onclick="client.getChannelProcessor('input').pressButton(0, { Nexus: 1 })">Nexus</button> <br />
                        <button onclick="client.getChannelProcessor('input').pressButton(0, { View: 1 })">View</button> <button onclick="client.getChannelProcessor('input').pressButton(0, { Menu: 1 })">Menu</button> <br />
                    </div>
    
                    <div class="buttons" style="text-align: center; padding: 10px;">
                        <button onclick="client.getChannelProcessor('input').pressButton(0, { Y: 1 })">Y</button> <br />
                        <button onclick="client.getChannelProcessor('input').pressButton(0, { X: 1 })">X</button> <button onclick="client.getChannelProcessor('input').pressButton(0, { B: 1 })">B</button> <br />
                        <button onclick="client.getChannelProcessor('input').pressButton(0, { A: 1 })">A</button> <br />
                    </div>
    
                </div>
                
            </div>
    
        </div>
    </div>
    <hr />
    
    <div class="debug">
        Video: <span id="videoPerformance"></span><br />
        Audio: <span id="audioPerformance"></span><br />
        Input: <span id="inputPerformance"></span>
    </div>

  </body>
</html>